<template>
  <div class="container">
    <div v-if="Object.keys(data).length" class="app-container">
      <div class="tip-bar">
        <span>停车场：{{ data.parkName }}</span>
        <span>
          <span class="count">剩余空位：{{ data.leftSpaceCount }}
            <i
              v-hasPermi="['admin:carcome:fixLeftSpaceCount']"
              class="el-icon-edit"
              @click="dialogVisible=true"/></span>
          <span>总泊位数：{{ data.spaceCount }}</span>
        </span>
      </div>
      <div class="info">
        <div class="left">
          <div class="entrance">通道：{{ data.enterPortName }}</div>
          <div class="img-box">
            <div v-for="(item,index) in data.enterImgUrls" :key="index" class="img-item">
              <img v-gallery :src="item" alt="">
              <div v-if="index===0" class="img-tip">抓拍照片</div>
              <div v-else class="img-tip">识别照片</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="carno">
            <span>
              <span>{{ data.plateNumber }}</span>
              <i
                v-hasPermi="['admin:carcome:fixPlateNumber']"
                class="el-icon-edit"
                @click="fixingPlateNumberDialogVisible = true"/>
              <el-tag>{{data.carcomeTypeStr}}</el-tag>
            </span>
            <span class="car-color"> 车牌颜色：{{ data.plateColor }}</span>
          </div>
          <div class="info-list">
            <div class="info-list-item">
              <div>入场时间：{{ data.enterTime }}</div>
              <div>入场通道：{{ data.enterPassWayName }}</div>
            </div>
            <div class="info-list-item"
            style="height:20px;display: flex;align-items: center;box-sizing: border-box;" @click="rukouFlag = !rukouFlag">
              <div
              v-for="(item,index) in data.enterList" :key="index"
              v-if="rukouFlag">{{item.key}}：{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="info" style="margin-top:20px;">
        <div class="left">
          <div class="entrance">通道：{{ data.outPortName }}</div>
          <div class="img-box">
            <div v-for="(item,index) in data.outImgUrls" :key="index" class="img-item">
              <img v-gallery :src="item" alt="">
              <div v-if="index===0" class="img-tip">抓拍照片</div>
              <div v-else class="img-tip">识别照片</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="carno">
            <span>
              <span>{{ data.plateNumber }}</span>
              <!-- <i class="el-icon-edit"/> -->
              <el-tag>{{data.carcomeTypeStr}}</el-tag>
            </span>
            <span class="car-color"> 车牌颜色：{{ data.plateColor }}</span>
          </div>
          <div class="info-list">
            <div class="info-list-item">
              <div>入场时间：{{ data.enterTime }}</div>
              <div>入场通道：{{ data.enterPassWayName }}</div>
            </div>
            <div class="info-list-item">
              <div>出场时间：{{ data.outTime }}</div>
              <div>出场通道：{{ data.outPassWayName }}</div>
            </div>
            <div class="info-list-item">
              <div>停车时长：{{ data.durationStr }}</div>
              <div>应收金额：{{ data.totalAmount }}</div>
            </div>
            <div class="info-list-item">
              <div>优惠金额：{{ data.discountAmount }}</div>
              <div>实收金额：{{ data.paidAmount }}</div>
              <div>欠费金额：{{ data.actualAmount }}</div>
            </div>
            <div class="info-list-item"
            style="height:20px;display: flex;align-items: center;box-sizing: border-box;" @click="chukouFlag = !chukouFlag">
              <div
              v-for="(item,index) in data.outExtraList" :key="index"
              v-if="chukouFlag">{{item.key}}：{{ item.value }}</div>
            </div>
            <el-button
              v-hasPermi="['admin:carcome:manuallyOpenRail']"
              v-if="data.status===2&&Number(data.actualAmount)>0"
              type="warning"
              size="small"
              style="float:right"
              @click="manuallyOpenRailFormDialogVisible=true">开闸</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      title="纠正停车场剩余车位"
      width="30%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item
          :rules="[{ required: true, message: '剩余车位不能为空'}]"
          label="剩余车位"
          prop="leftSpaceCount"
        >
          <el-input v-model.number="form.leftSpaceCount" type="number" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </span>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :visible.sync="fixingPlateNumberDialogVisible" title="车牌纠正" width="30%">

      <el-form ref="fixingPlateNumberForm" :inline="true" :rules="fixingPlateNumberRules" :model="fixingPlateNumberForm" align="center" label-width="140px">
        <el-form-item label=" 正确的车牌号码：  " prop="plateNumber">
          <el-input v-model="fixingPlateNumberForm.plateNumber" clearable class="filter-item" style="max-width: 260px;" placeholder=""/>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fixingPlateNumber('fixingPlateNumberForm')">确 定</el-button>
        <el-button @click="fixingPlateNumberDialogVisible = false">取 消</el-button>
      </span>

    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="manuallyOpenRailFormDialogVisible" title="开闸确认" width="30%">

      <el-form ref="manuallyOpenRailForm" :inline="true" :rules="manuallyOpenRailRules" :model="manuallyOpenRailForm" align="center" label-width="140px">
        <el-form-item label="支付类型：" prop="tradeType">
          <el-select v-model="manuallyOpenRailForm.tradeType" placeholder="请选择">
            <el-option :value="1" label="现金支付"/>
          </el-select>
        </el-form-item>
        <el-form-item label="实收金额：" prop="actualAmount">
          <el-input v-model="manuallyOpenRailForm.actualAmount" type="number" clearable class="filter-item" placeholder=""/>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input v-model="manuallyOpenRailForm.remark" clearable class="filter-item" placeholder=""/>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openRailForm('manuallyOpenRailForm')">确 定</el-button>
        <el-button @click="manuallyOpenRailFormDialogVisible = false">取 消</el-button>
      </span>

    </el-dialog>
  </div>
</template>
<script>
import { fetchDetail, fixLeftSpaceCount, fixingPlateNumber, manuallyOpenRail } from '@/api/carcome'
export default {
  name: 'CarcomeDetail',
  data() {
    return {
      rukouFlag:false,//入口隐藏字段显示
      chukouFlag:false,//出口隐藏字段显示
      data: {},
      dialogVisible: false,
      form: {
        parkId: null
      },
      objKey:[],//所需显示对象的key
      fixingPlateNumberDialogVisible: false,
      fixingPlateNumberForm: {
        id: this.$route.query.id
      },
      fixingPlateNumberRules: {
        manualPlateNumber: [{ required: true, message: '车牌号码不能为空', trigger: 'blur' }]
      },
      manuallyOpenRailFormDialogVisible: false,
      manuallyOpenRailForm: {
        carcomeId: this.$route.query.id
      },
      manuallyOpenRailRules: {
        tradeType: [{ required: true, message: '支付类型不能为空', trigger: 'blur' }],
        actualAmount: [{ required: true, message: '实收金额不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    openRailForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          manuallyOpenRail(this.manuallyOpenRailForm).then(res => {
            if (res.resultCode === '2013') {
              this.$message.error(res.resultMsg)
            }
            this.manuallyOpenRailFormDialogVisible = false
            this.getDetail()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    fixingPlateNumber(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          fixingPlateNumber(this.fixingPlateNumberForm).then(res => {
            this.fixingPlateNumberDialogVisible = false
            this.getDetail()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          fixLeftSpaceCount(this.form).then(res => {
            this.dialogVisible = false
            this.getDetail()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getDetail() {
      fetchDetail({ id: this.$route.query.id }).then(res => {
        let data = res.data || {}
        let enterExtra = data.enterExtra ? JSON.parse(data.enterExtra) : {}
        let outExtra = data.outExtra ? JSON.parse(data.outExtra) : {}
        // objKey
        let enterList = []
        for (let key in enterExtra) {
          enterList.push({key:key,value:enterExtra[key]})
        }
        let outExtraList = []
        for (let key in outExtra) {
          outExtraList.push({key:key,value:outExtra[key]})
        }
        this.data = {
          ...data,
          enterExtraObj:data.enterExtra ? JSON.parse(data.enterExtra) : {},
          outExtraObj:data.outExtra ? JSON.parse(data.outExtra) : {},
          enterList,
          outExtraList,
        }
        this.form.parkId = this.data.parkId
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  min-height: calc(100vh - 84px);
  background-color: #F5F7FA;
  .tip-bar{
    height: 34px;
    background: #F8F8F8;
    box-shadow: 0px 2px 3px 0px rgba(64,158,255,0.1608);
    border-radius: 5px 5px 0px 0px;
    border: 1px solid rgba(64,158,255,0.1294);
    padding: 0 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .count{
      margin-right: 26px;
      .el-icon-edit{
        margin: 0 10px;
        color: #1891FF;
        font-weight: 400;
        cursor: pointer;
      }
    }
  }
  .info{
    background: #fff;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0px 2px 3px 0px rgba(64,158,255,0.2314);
    border-radius: 0 0 5px 5px;
    padding: 16px 27px;
    font-size: 14px;
    .left{
      width: 60%;
      float: left;
      .img-box{
        display: flex;
        .img-item{
          margin: 24px 40px 12px;
          text-align: center;
          cursor: pointer;
          img{
            width: 195px;
            height: 125px;
          }
          .img-tip{
            margin-top: 12px;
            color: #5D5D5D;
          }
        }
      }
    }
    .right{
      width: 40%;
      float: left;
      .carno{
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        .el-icon-edit{
          margin: 0 10px;
          color: #1891FF;
          font-weight: 400;
          cursor: pointer;
        }
       .car-color{
          font-size: 14px;
        }
      }
      .info-list{
        margin-top: 24px;
        .info-list-item{
          display: flex;
          justify-content: space-between;
          margin: 15px 0;

        }
      }
    }
  }
}
</style>
